<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>H5 & CSS3 new character</title>
  <style>
    input::placeholder {
      color: sandybrown;
    }

    /* 选择具有value属性的input */
    input[value] {
      color: pink;
    }

    input[type=password] {
      color: yellowgreen;
    }

    /* 选择属性为class,同时以ico开头的值的div */
    div[class^=ico] {
      background-color: burlywood;
    }

    section[class$=data] {
      color: blue;
    }

    *[class*=c] {
      font-size: 28px;
    }

    .father :nth-child(odd) {
      background-color: pink;
    }

    .father :nth-child(even) {
      background-color: aqua;
    }

    .order :nth-child(-n+2) {
      background-color: burlywood;
    }

    .order :nth-child(n+5) {
      background-color: cornflowerblue;
    }

    /* nth-child 会把所有的盒子都排列序号 */
    /* div:nth-c(1) 里的1先 再看div, 不能匹配则失效 */
    section div:nth-child(1) {
      background-color: black;
    }

    /* nth-of-type 会把指定元素的盒子排列序号 */
    /* div:nth-of-type(1) 里的div先 , 再看 1 ,不能匹配则失效 */
    section div:nth-of-type(1) {
      background-color: black;
    }

    .cont {
      width: 400px;
      height: 100px;
      background-color: aqua;
    }

    .cont::before {
      content: "before";
    }

    .cont::after {
      content: 'after';
    }

    .slide {
      position: relative;
      width: 170px;
      height: 35px;
      border: 1px solid blueviolet;
    }

    @font-face {
      font-family: 'icomoon';
      src: url('font/icomoon.eot?kunq2j');
      src: url('font/icomoon.eot?kunq2j#iefix') format('embedded-opentype'),
        url('font/icomoon.ttf?kunq2j') format('truetype'),
        url('font/icomoon.woff?kunq2j') format('woff'),
        url('font/icomoon.svg?kunq2j#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
      font-display: block;
    }

    .slide::after {
      position: absolute;
      top: 10px;
      right: 10px;
      font-family: 'icomoon';
      content: '\ea42';
      color: blueviolet;
    }

    .anime {
      width: 200px;
      height: 100px;
      background-color: violet;
      /* transition: width .5s, height .5s; */
      transition: all .5s;
    }

    .anime:hover {
      width: 500px;
      height: 200px;
      background-color: tomato;
    }

    .bar {
      margin-top: 10px;
      width: 150px;
      height: 15px;
      border: 1px solid red;
      border-radius: 7px;
      padding: 1px;
    }

    .bar-in {
      width: 50%;
      height: 100%;
      border-radius: 7px;
      background-color: red;
      transition: all .5s ease;
    }

    .bar:hover .bar-in {
      width: 87%;
      background-color: brown;
    }
  </style>

  <!-- <script type="text/javascript">
    $(function () {
      window.scrollTo(0, document.body.scrollHeight);
    });
  </script> -->
</head>

<body>
  <h3>一. HTML5 新特性</h3>
  <p>针对原来全是div的不足, 增加了新语义标签/新的表单和表单属性</p>
  <p>注意: 新特性基本是 IE/9+ 以上才支持</p>
  <a href="https://www.caniuse.com/" style="text-decoration: none;">兼容性查询工具</a>
  <h4>1. 新增语义化标签</h4>
  <p>div对于搜索引擎来说是没有语义的</p>
  <ul>
    <li>header 头部标签</li>
    <li>nav 导航标签</li>
    <li>article 内容标签</li>
    <li>section 定义文档某个区域</li>
    <li>aside 侧边栏标签</li>
    <li>footer 底部标签</li>
  </ul>
  <h4>2. 新增多媒体标签</h4>
  <p>不再使用flash或插件</p>
  <ul>
    <li>audio 音频: 尽量使用 mp4 格式</li>
    <li>video 视频</li>
  </ul>
  <video width="400px" controls muted loop poster="img/milogo.png">
    <source src="media/xiaomi-11ultra.mp4" type="video/mp4">
    <source src="media/xiaomi-11ultra.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
  </video>
  <audio src="media/no matter.mp3" style="display: block;" controls muted></audio>
  <h4>3. 新增表单类型</h4>
  <p>验证时需要添加 form 表单域</p>
  <form action="">
    <ul>
      <li>邮箱: <input type="email"></li>
      <li>网址: <input type="url"></li>
      <li>日期: <input type="date"></li>
      <li>数量: <input type="number"></li>
      <li>手机: <input type="tel"></li>
      <li>搜索: <input type="search"></li>
      <li>颜色: <input type="color"></li>
      <li><input type="submit" value="提交"></li>
    </ul>
  </form>
  <h4>4. 新增表单属性</h4>
  <form action="">
    <input type="search" name="search" required="required" placeholder="sansheng" autocomplete="off">
    <input type="submit" value="提交">
  </form>
  <h3>二. CSS3 新特性</h3>
  <p>主要: 新增选择器 盒子模型 其他特性</p>
  <h4>1. 属性选择器</h4>
  <p> 权重为 0,0,1,0 (可看作10)</p>
  <ol>
    <li>可以不用借助于类或者id选择器</li>
    <input type="text" value="请输入用户名">
    <input type="text">
    <li>可以选择 属性=值 的某些元素 (重要,常用)</li>
    <input type="date">
    <input type="password">
    <li>可以选择属性值开头^/结尾$/含有*的某些元素</li>
    <div class="ico-1">1</div>
    <div class="ico-2">2</div>
    <div class="ico-3">3</div>
    <div class="ico-4">4</div>
    <section class="sec-data">1</section>
    <section class="sec-data">2</section>
    <section class="sec-no">3</section>
  </ol>
  <h4>2. 结构伪类选择器</h4>
  <p>权重为 0,0,1,0</p>
  <p>odd 奇数 | even 偶数 | n 全部</p>
  <ul class="father">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <p>还可以是公式 2n+1 奇数 | 2n 偶数 | n+5 从第五个(包含)开始到最后 | -n+5 前五个(包含)</p>
  <p>n 可以看做 0 1 2 ... </p>
  <ul class="order">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>
  <p>注意 nth-child 与 nth-of-type 区别, 前者先执行 div:nth-c(1) 里的1再看div 若div不能匹配则选择不到!
  </p>
  <section>
    <p>1</p>
    <div>2</div>
    <div>3</div>
  </section>
  <h4>3. 伪元素选择器 (重点)</h4>
  <p>伪元素选择器允许利用CSS 创建新标签, 从而简化文档树, 剔除无表现的HTML元素</p>
  <ul>
    <li>属于行内元素</li>
    <li>在父元素的内容前后创建</li>
    <li>必须有 content 属性</li>
    <li>权重为 0,0,0,1 (看作1)</li>
  </ul>
  <div class="cont"> | content | </div>
  <div class="slide"></div>

  <h4>4. CSS3 盒子模型</h4>
  <p>css3 中可以通过 box-sizing 来指定盒子模型</p>
  <p>
    <code>
      box-sizing: content-box (默认的)盒子大小为 width+padding+border <br>
      box-sizing: border-box 盒子大小为 width, padding 和 border 更改不会撑大盒子
    </code>
  </p>

  <p>应用:</p>
  <p>
    <code>
      *{<br>
        margin: 0;<br>
        padding: 0;<br>
        box-sizing: border-box;<br>
      }
    </code>
  </p>

  <h4>5. CSS3 过渡效果(重点, 颠覆性更新)</h4>
  <p><code>
  transition: 需过渡的属性 时间 运动曲线 开始时间; (谁做过渡给谁加过渡)
</code></p>
  <div class="anime"></div>
  <div class="bar">
    <div class="bar-in"></div>
  </div>

  <h4>6. CSS3 其他特性(了解)</h4>
  <ol>
    <li>图片模糊</li>
    <code> filter: blur(2px); 滤镜: 数值越大越模糊 </code>
    <li>计算函数</li>
    <code> width: calc(100%-80px); calc() 允许在css中的计算 </code>
    <li>动画特性 (后续专门研究)</li>
  </ol>

  <br><br><br>
  <form action="">
    <input type="search" name="search" required="required" placeholder="sansheng" autofocus autocomplete="off">
    <input type="submit" value="底端聚焦">
  </form>
</body>

</html>